<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒人系列一——字符串拼接转换</title>
    <script>
        window.onload = function() {

            var changeBtn = document.getElementById("change-btn");
            changeBtn.onclick = function(e) {
                var origin = document.getElementById("origin");
                var prefix = document.getElementById("prefix").value;
                var suffix = document.getElementById("suffix").value;
                var result = document.getElementById("result");
                var originValue = origin.value;
                var len = originValue.length;
                var resultText = '';

                var startNum = 0;
                var endNum = 0;
                for (var i = 0; i < len; i ++) {
                    if (originValue.charAt(i) == '\n') {
                        endNum = i;
                        resultText += (prefix + originValue.substring(startNum, endNum) + suffix + '\n');
                        startNum = i + 1;
                    }
                }
                resultText += (prefix + originValue.substring(startNum, len) + suffix);
                result.value = resultText;
            }

        }

    </script>
</head>
<body>
    <textarea id="origin" style="width: 100%;height: 300px;" placeholder="例：
<body>
    <table>
        <tr></tr>
    </table>
</body>"></textarea>
    <button id="change-btn">转换</button><input id="prefix" placeholder="前面：andy = '" /><input id="suffix" placeholder="后面：';" />
    <textarea id="result" style="width: 100%;height: 300px;" placeholder="结果：
andy = '<body>';
andy = '    <table>';
andy = '        <tr></tr>';
andy = '    </table>';
andy = '</body>';"></textarea>
</body>
</html>